<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>待付款</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../../css/index.css" />
		<link rel="stylesheet" type="text/css" href="../../css/person.css"/>
		<script src="../../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/vant.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/ajax.js" type="text/javascript" charset="utf-8"></script>
		<script src="html5plus://ready"></script>
	</head>
	<body>
		<div id="app">
			<header>
				<van-row>
					<van-nav-bar id="header" title="待支付订单" left-arrow  @click-left="back"></van-nav-bar>
				</van-row>
			</header>
			<!--头部结束-->
			<section>
				<van-row id="order-id"  v-for="(item,index) in list" style="background-color:#F8F8F8;margin: 10px 0px;border-radius:20px ;"><!-- 单个商品订单开始 -->
					<!-- 订单编号样式 -->
					<van-col span="20">订单编号:{{item.Id}}</van-col>
					<van-col span="4" style="color: red;">{{item.StatusName}}</van-col>
					<van-col span="24" v-for="(x,y) in item.GoodsList">
						<van-card
						:price=x.GoodsPrice	
						:title=x.Name	
						:num=x.BuyCount
						id="font-size">	
							<img :src="x.GoodsImageUrl" onerror="javascript:this.src='../../img/insert.PNG'" slot="thumb">
						</van-card>
						<van-col span="24" id="min-txt">共{{x.BuyCount}}件商品，合计：￥：{{x.GoodsPrice*x.BuyCount}}（含运费￥：0.00）<hr id="hr-style"/></van-col>
					</van-col>
					<van-col span="5" offset="14">								
						<van-button size="small" round type="danger" @click="pay(item.Id)">支付</van-button>						
					</van-col>
					<van-col span="5" style="margin-bottom: 7px;">								
						<van-button size="small" round @click="Cancel(item.Id)">取消订单</van-button>												
					</van-col>
				</van-row><!-- 单个商品订单结束 -->
				<van-row>
					<van-col span="24">
						<span v-show="show" style="font-size: 36px;color: #C8C9CC;position: relative;top: 200px;left: 110px;">暂无订单</span>
					</van-col>
				</van-row>
			</section>
		</div>		
		<script type="text/javascript">
			var vm = new Vue({
				el: "#app",
				data: {
					list:"",
					key:"",
					show:true,
					totalprice:0,
				},
				mounted(){	
					plus.key.addEventListener("backbutton",function(){  
						var wv = plus.webview.currentWebview();
						plus.webview.close(wv.id);
					}); 
					var _this = this;
					_this.$toast.loading({
						duration: 0,       // 持续展示 toast
						forbidClick: true, // 禁用背景点击
						loadingType: 'spinner',
						mask:true,
						message: '加载中,请稍后...'
					});
					setTimeout(function(){
						_this.$toast.clear();
					},500);
					_this.key = localStorage.getItem("keys");
					ajax({
						type:"post",
						url:"http://dsapi.ysd3g.com/api/MyOrderlist",
						data:{
							key:_this.key
						},
						dataType:"JSONP",
						success:function(res){
							if(res.Error){	
								_this.$toast(res.Msg);
								// console.log(res.Data);
							}else{
								_this.list=res.Data;
								// console.log(_this.list);
								if(_this.list.length!=0){
									_this.show=false;
								};
							}
							// 商品列表								
						}
					})	
				},
				methods:{
					back(){						
						var wv = plus.webview.currentWebview();
						plus.webview.close(wv.id);
					},
					Cancel(i){
						var _this=this;
						_this.$toast.loading({
							duration: 0,       // 持续展示 toast
							forbidClick: true, // 禁用背景点击
							mask:true,
							loadingType: 'spinner',
							message: '取消订单中'
						});
						ajax({
							url:"http://dsapi.ysd3g.com/api/DeleteOrder",
							data:{
								key:_this.key,
								oId:i
							},
							dataType:"JSONP",
							success:function(res){
								if(res.Error){
									setTimeout(function(){
										_this.$toast("未知原因取消订单失败");
										setTimeout(function(){
											_this.$toast.clear();
										},1000)
									},1000);
								}else{
									setTimeout(function(){
										_this.list.splice(_this.list.map(item => item.Id).lastIndexOf(i),1);
										_this.$toast("取消订单成功");
										setTimeout(function(){
											_this.$toast.clear();
										},1000)
									},1000);
								}
							}
						});
					},
					pay(i){
						var _this=this;
						console.log(_this.key);
						console.log(i);
						ajax({
							url:"http://dsapi.ysd3g.com/api/OrderPay",
							dataType:"JSONP",
							data:{
								key:_this.key,
								oId:i,
								payType:"1",
								addressIdx:i,
								money:_this.totalprice
							},
							success:function(res){
								console.log(res);
								if(res.Error){
									_this.$toast.fail(res.Msg);
								}
								else{
									var payment = "";
									plus.payment.getChannels(function(s) {
										plus.payment.request(s[0], res.strJson, function() {
											vm.$toast.alert("支付操作成功！");
										}, function(e) {
											console.log(e);
											_this.$toast.fail(e.message);
										})
									}, function(e) {
										_this.$toast.fail(e.message);
									})
								}
							}
						});
					}
				},
			})
		</script>
	</body>
</html>
